<template>
  <div>
  <h2>房型列表</h2>
  <hr>
  <input type="button" value="添加房型" @click="FangXingAdd">
  <input type="button" value="房号添加" @click="FangHaoAdd">
  <input type="button" value="导出房号" @click="DC">
  <table border="1">
    <tr>
      <td>房型名称</td>
      <td>门市价格</td>
      <td>房间数量</td>
      <td>状态</td>
      <td>房号</td>
      <td>操作</td>
    </tr>
    <tr v-for="item in list">
      <td>{{item.fxName}}</td>
      <td>{{item.msPrice}}</td>
      <td>{{item.fxNum}}</td>
      <td>{{ item.fxzt==true?'启用':'停用' }}</td>
      <td>{{item.fhId}}</td>
      <td>
        <input type="button" v-if="item.fxzt==true" value="停用" @click="FangXingZT(item.fxId,item.fxzt)">
        <input type="button" v-else value="启用" @click="FangXingZT(item.fxId,item.fxzt)">
        <input type="button" value="删除" @click="FangXingShan(item.fxId)">
        <input type="button" value="修改" @click="FangXingXiouGai(item.fxId)">
      </td>
    </tr>
  </table>
  当前第{{ state.index }}页共{{ Count }}条
   <input type="button" value="首页" @click="fenye(1)">
   <input type="button" value="上一页" @click="fenye(state.index-1)">
   <input type="button" value="下一页" @click="fenye(state.index+1)">
   <input type="button" value="尾页" @click="fenye(Count2)">
   


  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import path from 'path';

const router = useRouter();
const route = useRoute();

let data:any=reactive({
  state:{
    index:1,
    size:2
  },
  list:[],
  Count:0,
  Count2:0
 
})
let {state,list,Count,Count2}=toRefs(data);

onMounted(() => {
  FangXingShow()
})
//分页
function fenye(Newindex:any){
  if(Newindex>=1&&Newindex<=Count2.value)
{
  state.value.index=Newindex
  FangXingShow()
}
}

function FangXingAdd(){
  router.push('/FangXingAdd')
}

function FangHaoAdd(){
  router.push('/FangHaoAdd')
}

//显示
function FangXingShow(){
  let obj={
    index:state.value.index,
    size:state.value.size
  }
  axios({
    url:'https://localhost:7071/api/FangXing/FangXingShow',
    method:'get',
    params:obj
  })
  .then(res=>{
    list.value=res.data.data
    Count.value=res.data.count
    Count2.value=res.data.count2

  })
  .catch(err=>{
    console.log(err)
  
  })

}
//修改状态
function FangXingZT(FXId:any,FXZT:any){
     if(FXZT==true)
     {
      FXZT=false
     }
     else{
      FXZT=true
     }
 axios({
  url:'https://localhost:7071/api/FangXing/FangXingZT',
  method:'post',
  params:{
    FXId:FXId,
    FXZT:FXZT
  }
 })
 .then(res=>{
  if(res.data.data>0)
 {
  alert('状态修改成功')
  FangXingShow()
 }
 else{
  alert('状态修改失败')
  return
 }
 })
 .catch(err=>{
  console.log(err)
 })
 


}
//删除
function FangXingShan(FXId:any){
  if(confirm('确定要删除吗')){
    axios({
  url:'https://localhost:7071/api/FangXing/FangXingShan',
  method:'post',
  params:{
    FXId:FXId
  }
 })
 .then(res=>{
  if(res.data.data>0)
 {
  alert('删除成功')
  FangXingShow()
 }
 else{
  alert('删除失败')
  return
 }
 })
 .catch(err=>{
  console.log(err)
 })
  }
  
}

function DC(){
  alert('导出成功')
  
}

//反填
function FangXingXiouGai(FXId:any)
{
 router.push({
  path:'/FangXingXiouGai',
  query:{
    FXId:FXId
  }
 })
 
}


</script>

<style scoped>

</style>